<%--suppress ALL --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<!doctype html>
<html lang="zh">
<head>
    <title>HSE安全信息管理系统</title>
    <%@include file="/common/header.jspf" %>
    <link href="${ctx}/resources/themes/style/style.css" rel="stylesheet" type="text/css">
    <style>
        .westContent{
            padding:10px 20px;
        }
    </style>
</head>
<body>
<div id="master-layout">
    <div data-options="region:'north',border:false,bodyCls:'theme-header-layout'" style="height:135px;overflow: hidden">
        <div class="theme-navigate">
            <div class="left">
                    <h1>
                        <img src="${ctx}/resources/themes/images/logo_03.png" width="419">
                    </h1>
            </div>
            <div class="right">
                <div class="rightA">
                    <div class="quit">
                        <a href="javascript:void(0)" id="logout">退出</a>
                    </div>
                    <div class="password">
                        <a href="javascript:void(0)" id="updatePwd">修改密码</a>
                    </div>
                    <div class="help">
                        <a href="javascript:void(0)">帮助</a>
                    </div>
                </div>
                <div class="rightB">
                    <div class="manager">
                        <a href="javascript:void(0)">${loginUser.realName}</a>
                    </div>
                    <div class="change">
                        <a href="javascript:void(0)" onclick="chuxian()" style="margin: 0 10px 0 0;line-height: 40px;color: #fff;font-size: 14px;">
                            <span id="currDeptName">${loginUser.department.name}</span>
                            <c:if test="${fn:length(loginUser.userDepartmentList) > 1}">
                                <img src="${ctx}/resources/themes/images/triangle_06.png" style="position:absolute;top:20px;right: 0">
                            </c:if>
                        </a>
                        <c:if test="${fn:length(loginUser.userDepartmentList) > 1}">
                            <div class="add" id="add">
                                <ul>

                                    <c:forEach var="ud" items="${loginUser.userDepartmentList}" >

                                            <c:if test="${ud.deptId !=loginUser.department.id}">
                                                <li id="${ud.deptId}" title="${ud.deptName}"><a href="javascript:void(0)">${ud.deptName}</a></li>
                                            </c:if>

                                    </c:forEach>
                                </ul>
                            </div>
                        </c:if>
                    </div>
                    <div class="desk">
                        <a href="javascript:void(0)" id="my-workbeach">我的工作台</a>
                    </div>
                </div>
            </div>
        </div>
        <!--end theme-navigate 导航条-->
        <div class="nav">
            <div id="menu_bar_pre" onclick="scrollMenueBar('pre',${fn:length(listMenu)});"></div>
            <div id="menu_bar">
                <ul>
                    <c:forEach var="menu" items="${listMenu}" varStatus="i">
                        <c:choose>
                            <c:when test="${i.index==0}">
                                <li class="menuA" id="${menu.id}" title="${menu.text}"><a href="javascript:void(0)" style="border-left:1px solid #fff">${menu.text}</a></li>
                            </c:when>
                            <c:otherwise>
                                <li class="menuA" id="${menu.id}" title="${menu.text}"><a href="javascript:void(0)">${menu.text}</a></li>
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
                </ul>
            </div>
            <div id="menu_bar_next" onclick="scrollMenueBar('next',${fn:length(listMenu)});"></div>
        </div>

    </div>

    <!--end region:'north'-->
    <div data-options="region:'center',border:false" id="control">
        <div id="tabs" data-options="fit:true">

        </div>
    </div>
    <!--end region:'center'-->
    <div id="menu" class="easyui-menu" style="">

        <div id="close_all">
            关闭全部
        </div>
        <div id="close_other">
            关闭其他
        </div>
        <div class="menu-sep"></div>
        <div id="close_right">
            关闭右侧标签页
        </div>
        <div id="close_left">
            关闭左侧标签页
        </div>
    </div>
</div>
<!--end master-layout-->
<script type="text/javascript">
    if(window !=top){
        top.location.href=location.href;
    }

    function chuxian() {
        var odiv = document.getElementById("add")

        if (odiv.style.display == 'block') {
            odiv.style.display = 'none'
        }

        else {
            odiv.style.display = 'block'
        }

    }


    function addTab(title, href,closable) {
        if(closable===undefined){
            closable=true
        }
        var tt = $('#tabs');
        if (tt.tabs('exists', title)) {//如果tab已经存在,则选中并刷新该tab
            tt.tabs('select', title);
            refreshTab({tabTitle: title, url: href});
        } else {
            var content = '<iframe scrolling="no" frameborder="0" src="' + href + '" style="width:100%;height:99%;"></iframe>';
            tt.tabs('add', {
                title: title,
                closable: closable,
                content: content
            });
        }
    }
    /**
     * 刷新tab
     *如果tabTitle为空，则默认刷新当前选中的tab
     *如果url为空，则默认以原来的url进行reload
     */
    function refreshTab(tabTitle, url) {
        var $tabs = $('#tabs');
        var refresh_tab;
        if (tabTitle) {
            refresh_tab = $tabs.tabs('getTab', tabTitle);
        } else {
            refresh_tab = $tabs.tabs('getSelected');
        }
        if (refresh_tab && refresh_tab.find('iframe').length > 0) {
            var _refresh_iframe = refresh_tab.find('iframe')[0];
            //_refresh_iframe.src = refresh_url;
            if (url) {
                _refresh_iframe.contentWindow.location.href = url;
            } else {
                _refresh_iframe.contentWindow.location.href = _refresh_iframe.src;
            }
        }
    }
    //获得菜单的数量
    var memuSize="${fn:length(listMenu)}";
    //初始化menu
    window.onload = function () {
        scrollMenueBar('', memuSize);
    }
    //windows 大小改变的时候 样式改变
    window.onresize = function () {
        setTimeout(function () {
            scrollMenueBar('', memuSize);
        }, 200)

    }
    function scrollMenueBar(type, menuCount) {

        var menu_bar_pre = document.getElementById('menu_bar_pre');//上一页按钮
        var menu_bar_next = document.getElementById('menu_bar_next');//下一页按钮
        var menu_Bar = document.getElementById('menu_bar');//菜单对象

        var menu_bar_height = 40;//菜单高度
        var menu_bar_width = menu_Bar.offsetWidth;//菜单宽度
        //计算菜单分页数量
        var menu_bar_page = Math.ceil((menuCount * 123) / menu_bar_width);
        var menu_bar_scrollTop = menu_Bar.scrollTop;//菜单内容滚动的高度
        //滚动菜单
        switch (type) {
            case 'pre':
                menu_bar_scrollTop = (menu_bar_scrollTop - menu_bar_height) < 0 ? 0 : (menu_bar_scrollTop - menu_bar_height);
                break;
            case 'next':
                menu_bar_scrollTop = (menu_bar_scrollTop + menu_bar_height) > (menu_bar_page * menu_bar_height) ? (menu_bar_page * menu_bar_height) : (menu_bar_scrollTop + menu_bar_height);
                break;
        }
        menu_Bar.scrollTop = menu_bar_scrollTop;
        //控制翻页按钮
        if (menu_bar_page > 1) {
            menu_bar_pre.style.display = '';//隐藏上一页按钮
            menu_bar_next.style.display = '';//隐藏上一页按钮
        } else {
            menu_bar_pre.style.display = 'none';//隐藏上一页按钮
            menu_bar_next.style.display = 'none';//隐藏上一页按钮
        }
        if (menu_bar_scrollTop == 0) {//当前为第一页
            menu_bar_pre.style.display = 'none';//隐藏上一页按钮
        } else if (menu_bar_scrollTop >= (menu_bar_page - 1) * menu_bar_height) {//当前为最后一页
            menu_bar_next.style.display = 'none';//隐藏下一页按钮
        }

    }
    var layerIndex;
    //成功后关闭layer
    function closeLayer(data) {
        layer.close(layerIndex);
        layer.msg(data.message+"即将返回登陆页面！",{time:3000,icon:1});
        setTimeout(function () {
            window.location.href=ROOT_PATH+'/logout.shtml';
        },3000)

    }

    function refreshMenuTree(id,title) {
        $('#master-layout').layout('add',{
            id:'modelName',
            region:'west',
            plit:true,
            border:false,
            width:300,
            bodyCls:'westContent',
            content:'<ul class="easyui-tree" id="rightMenuTree"></ul>'
        });
        $('#master-layout').layout('expand','west');

        $('#modelName').panel({
            title:title
        });
        $('#rightMenuTree').tree({
            url:ROOT_PATH+'/permission/resource/selectAllResourcsById.shtml?resourceId='+id,
            onSelect:function (node) {
                var title=node.text;
                var id=node.id;
                var href=node.resUrl;
                if(href!=''&& href!=null){
                    href=href+"?resourceId="+id
                    addTab(title,href);
                }
            }

        });
    }

    $(function () {

        //右侧二级菜单绑定点击事件
        $('#menu_bar').on('click','li',function () {

            //获得parentId
            var $id=$(this).attr("id");
            var $title=$(this).attr("title");


            refreshMenuTree($id,$title);

        })

        /*布局部分*/
        $('#master-layout').layout({
            fit: true/*布局框架全屏*/
        });
        /*为选项卡绑定右键*/
        var $tabs = $('#tabs');
        var tabIndex;
        $tabs.tabs({
            onContextMenu: function (e, title, index) {
                tabIndex = index;
                e.preventDefault();
                $('#menu').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            }
        });

        //关闭所有标签页 留下首页
        $("#close_all").on("click", function () {
            var tabList = $tabs.tabs('tabs');
            for (var i = tabList.length - 1; i > 0; i--) {
                $tabs.tabs('close', i);
            }
        });
        //关闭非当前标签页（先关闭右侧，再关闭左侧）
        $("#close_other").on("click", function (e) {
            var tabList = $tabs.tabs('tabs');
            var index = tabIndex;
            for (var i = tabList.length - 1; i > index; i--) {
                $tabs.tabs('close', i);
            }
            var num = index - 1;
            for (var i = num; i > 0; i--) {
                $tabs.tabs('close', 1);
            }
            $tabs.tabs('select', 1);
        });
        //关闭当前标签页右侧标签页
        $("#close_right").on("click", function () {
            var tabList = $tabs.tabs('tabs');
            var index = tabIndex;
            for (var i = tabList.length - 1; i > index; i--) {
                $tabs.tabs('close', i);
            }
        });
        //关闭当前标签页左侧标签页
        $("#close_left").on("click", function () {
            var index = tabIndex;
            var num = index - 1;
            for (var i = 0; i < num; i++) {
                $tabs.tabs('close', 1);
            }
            $tabs.tabs('select', 1);
        });
        /**
         * 打开修改密码的页面
         */

        $('#updatePwd').on('click',function () {
            layerIndex=layer.open({
                type: 2,
                title: '修改密码',
                resize:false,
                area: ['600px', '300px'],
                content: ROOT_PATH+'/permission/user/updatePassword.shtml'
            });
        })

        /**
         * 退出
         */
        $('#logout').on('click',function () {
            layer.confirm('是否确定退出？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                window.location.href=ROOT_PATH+'/logout.shtml';

            });

        })

        /**
         * 切换部门
         */
        $('#add').on('click','li',function () {
            var deptId=$(this).attr('id');
            var deptName=$(this).attr('title');
            layer.confirm('是否确定切换部门？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                $.ajax({
                    type: "POST",
                    url: ROOT_PATH+'/switchDepartment.shtml',
                    data: {deptId:deptId,deptName:deptName},
                    dataType: "json",
                    success: function(data){
                        window.location.href=ROOT_PATH+'/index.shtml';
                    }
                });
            });


        })
        var href=ROOT_PATH+'/main.shtml';
        addTab("主页",href,false);
        //我的工作
        $('#my-workbeach').on('click',function () {
            //根据标识查询菜单
            var code="wodegongzuo";
            $.ajax({
                type: "POST",
                url: ROOT_PATH+'/permission/resource/selectIdByCode.shtml?code='+code,
                dataType: "json",
                success: function(data){
                    //根据Id查询树行结构
                    refreshMenuTree(data,"我的工作");
                }
            });
        })
    })

</script>
</body>
</html>
